<template>
  <div class="reset-container">
    <div class="card reset-card">
      <div class="reset-header">
        <h3 class="mb-2">修改密码</h3>
        <p>请输入您的用户名和新密码</p>
      </div>
      <div class="reset-body">
        <form @submit.prevent="handleResetPassword">
          <div class="mb-4">
            <label for="username" class="form-label">用户名</label>
            <div class="input-group">
              <span class="input-group-text">
                <i class="bi bi-person"></i>
              </span>
              <input
                type="text"
                class="form-control with-icon"
                id="username"
                v-model="resetForm.username"
                placeholder="请输入您的用户名"
                required
              />
            </div>
            <div v-if="errors.username" class="form-text text-danger">
              {{ errors.username }}
            </div>
          </div>
          <div class="mb-4">
            <label for="oldPassword" class="form-label">原密码</label>
            <div class="input-group">
              <span class="input-group-text">
                <i class="bi bi-lock"></i>
              </span>
              <input
                :type="showOldPassword ? 'text' : 'password'"
                class="form-control with-icon"
                id="oldPassword"
                v-model="resetForm.oldPassword"
                placeholder="请输入原密码"
                required
              />
              <button
                class="btn btn-outline-secondary"
                type="button"
                @click="toggleOldPassword"
              >
                <i :class="showOldPassword ? 'bi bi-eye-slash' : 'bi bi-eye'"></i>
              </button>
            </div>
            <div v-if="errors.oldPassword" class="form-text text-danger">
              {{ errors.oldPassword }}
            </div>
          </div>
          <div class="mb-4">
            <label for="newPassword" class="form-label">新密码</label>
            <div class="input-group">
              <span class="input-group-text">
                <i class="bi bi-key"></i>
              </span>
              <input
                :type="showNewPassword ? 'text' : 'password'"
                class="form-control with-icon"
                id="newPassword"
                v-model="resetForm.newPassword"
                placeholder="请输入新密码"
                required
              />
              <button
                class="btn btn-outline-secondary"
                type="button"
                @click="toggleNewPassword"
              >
                <i :class="showNewPassword ? 'bi bi-eye-slash' : 'bi bi-eye'"></i>
              </button>
            </div>
            <div class="form-text">密码长度至少为6个字符</div>
            <div v-if="errors.newPassword" class="form-text text-danger">
              {{ errors.newPassword }}
            </div>
          </div>
          <div class="mb-4">
            <label for="confirmPassword" class="form-label">确认新密码</label>
            <div class="input-group">
              <span class="input-group-text">
                <i class="bi bi-key-fill"></i>
              </span>
              <input
                :type="showConfirmPassword ? 'text' : 'password'"
                class="form-control with-icon"
                id="confirmPassword"
                v-model="resetForm.confirmPassword"
                placeholder="请再次输入新密码"
                required
              />
              <button
                class="btn btn-outline-secondary"
                type="button"
                @click="toggleConfirmPassword"
              >
                <i :class="showConfirmPassword ? 'bi bi-eye-slash' : 'bi bi-eye'"></i>
              </button>
            </div>
            <div v-if="errors.confirmPassword" class="form-text text-danger">
              {{ errors.confirmPassword }}
            </div>
          </div>
          <div class="d-grid">
            <button
              type="submit"
              class="btn btn-warning btn-reset"
              :disabled="loading"
            >
              <i v-if="!loading" class="bi bi-check-circle me-2"></i>
              <span v-if="loading" class="spinner-border spinner-border-sm me-2" role="status"></span>
              {{ loading ? '处理中...' : '确认修改' }}
            </button>
          </div>
        </form>
        <div class="text-center mt-4">
          <p>
            <router-link to="/login" class="text-decoration-none">
              <i class="bi bi-arrow-left me-1"></i>返回登录
            </router-link>
          </p>
        </div>
        <div v-if="message" class="mt-3 text-center">
          <div :class="['alert', status === 'success' ? 'alert-success' : 'alert-danger']">
            <i :class="['bi', status === 'success' ? 'bi-check-circle-fill' : 'bi-exclamation-triangle-fill', 'me-2']"></i>
            {{ message }}
          </div>
        </div>
      </div>
    </div>
    <div class="reset-footer">
      <p>
        <router-link to="/">首页</router-link> · 
        <router-link to="/login">登录</router-link> · 
        <router-link to="/register">注册账号</router-link>
      </p>
      <p>© {{ new Date().getFullYear() }} 登录系统 - 基于Spring Boot和MyBatis-Plus</p>
    </div>
  </div>
</template>

<script>
import { defineComponent, reactive, ref } from 'vue';
import { useRouter } from 'vue-router';
import { resetPassword } from '@/api/auth';

export default defineComponent({
  name: 'ResetPassword',
  setup() {
    const router = useRouter();
    
    const resetForm = reactive({
      username: '',
      oldPassword: '',
      newPassword: '',
      confirmPassword: ''
    });
    
    const errors = reactive({
      username: '',
      oldPassword: '',
      newPassword: '',
      confirmPassword: ''
    });
    
    const loading = ref(false);
    const message = ref('');
    const status = ref('');
    
    // 密码可见性
    const showOldPassword = ref(false);
    const showNewPassword = ref(false);
    const showConfirmPassword = ref(false);
    
    // 切换密码可见性
    const toggleOldPassword = () => {
      showOldPassword.value = !showOldPassword.value;
    };
    
    const toggleNewPassword = () => {
      showNewPassword.value = !showNewPassword.value;
    };
    
    const toggleConfirmPassword = () => {
      showConfirmPassword.value = !showConfirmPassword.value;
    };
    
    // 表单验证
    const validateForm = () => {
      let isValid = true;
      
      // 重置错误信息
      Object.keys(errors).forEach(key => {
        errors[key] = '';
      });
      
      // 验证用户名
      if (!resetForm.username.trim()) {
        errors.username = '请输入用户名';
        isValid = false;
      }
      
      // 验证原密码
      if (!resetForm.oldPassword) {
        errors.oldPassword = '请输入原密码';
        isValid = false;
      }
      
      // 验证新密码
      if (!resetForm.newPassword) {
        errors.newPassword = '请输入新密码';
        isValid = false;
      } else if (resetForm.newPassword.length < 6) {
        errors.newPassword = '新密码长度不能少于6个字符';
        isValid = false;
      }
      
      // 验证确认密码
      if (!resetForm.confirmPassword) {
        errors.confirmPassword = '请确认新密码';
        isValid = false;
      } else if (resetForm.newPassword !== resetForm.confirmPassword) {
        errors.confirmPassword = '两次输入的新密码不一致';
        isValid = false;
      }
      
      return isValid;
    };
    
    // 处理密码重置
    const handleResetPassword = async () => {
      // 表单验证
      if (!validateForm()) {
        return;
      }
      
      loading.value = true;
      message.value = '';
      
      try {
        const response = await resetPassword(
          resetForm.username.trim(),
          resetForm.oldPassword,
          resetForm.newPassword
        );
        
        if (response.code === 200) {
          // 修改成功
          status.value = 'success';
          message.value = '密码修改成功！即将跳转到登录页面...';
          
          // 清空表单
          Object.keys(resetForm).forEach(key => {
            resetForm[key] = '';
          });
          
          // 跳转到登录页
          setTimeout(() => {
            router.push('/login');
          }, 2000);
        } else {
          // 修改失败
          status.value = 'error';
          message.value = response.message || '密码修改失败，请检查用户名和原密码是否正确';
        }
      } catch (error) {
        console.error('Reset password error:', error);
        status.value = 'error';
        message.value = '密码修改失败，请稍后再试';
      } finally {
        loading.value = false;
      }
    };
    
    return {
      resetForm,
      errors,
      loading,
      message,
      status,
      showOldPassword,
      showNewPassword,
      showConfirmPassword,
      toggleOldPassword,
      toggleNewPassword,
      toggleConfirmPassword,
      handleResetPassword
    };
  }
});
</script>

<style scoped>
.reset-container {
  max-width: 450px;
  margin: 80px auto;
}
.reset-card {
  border-radius: 1rem;
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.1);
  overflow: hidden;
  border: none;
}
.reset-header {
  background: linear-gradient(135deg, #fd7e14 0%, #e76f51 100%);
  color: white;
  padding: 2rem;
  text-align: center;
}
.reset-header h3 {
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.reset-header p {
  opacity: 0.9;
  margin-bottom: 0;
}
.reset-body {
  padding: 2.5rem;
  background-color: white;
}
.input-group-text {
  background-color: transparent;
  border-right: none;
  padding-right: 0;
}
.form-control.with-icon {
  border-left: none;
  padding-left: 0.5rem;
}
.btn-reset {
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.05rem;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  background: linear-gradient(135deg, #fd7e14 0%, #e76f51 100%);
  border: none;
  transition: all 0.3s;
}
.btn-reset:hover {
  transform: translateY(-2px);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}
.reset-footer {
  text-align: center;
  margin-top: 2rem;
  color: #6c757d;
}
.reset-footer a {
  color: #6c757d;
  text-decoration: none;
}
.reset-footer a:hover {
  color: #fd7e14;
}
</style> 